AULA03 - Conceitos básicos de formatação CSS¶


AGENDA¶

  • Conceitos básicos da formatação de estilos CSS
  • Seletores
  • Propriedade CSS: color
  • Propriedade CSS: background
  • Propriedade CSS customizada
  • Referências
  • Perguntas

1. Conceitos básicos da formatação de estilos CSS¶

1.1. Seletores¶

  • Para utilizarmos a formatação com CSS, necessitamos de alguns seletores para indicar onde a propriedade será aplicada. Para tal, poderemos utilizar 3 tipos:
    • Seletores de HTML: são as próprias tags de HTML.
    • Seletores de Classes: são aplicados nas tags de HTML por meio do atributo class = " " .
    • Seletores Identificadores: são aplicados nas tags de HTML por meio do atributo id = " " .
Seletor Tipo de Seletor Aplicado em
a HTML Todas as tags especificadas no HTML.
.minhaClasse Classe Qualquer tag HTML que tenha a Classe especificada.
a.minhaClasse Dependência de Classe Tag HTML especificada que tenha a Classe especificada.
#meuID Identificadores Qualquer tag HTML que tenha o ID especificado.
a#meuID Dependência de Identificadores Tag HTML especificada que tenha o ID especificado.
* Universal Todas as tags HTML.
  • A sintaxe indicada porderá ser utilizada tanto no arquivo externo de css, quanto internamente no código HTML, delimitado pelas tags <style> ... </style>.
seletor { 
    propriedade: valor;  
}

Exemplo:¶

  • Exemplo de Arquivo externo de CSS (estilo.css)

Seletores de HTML¶

p { 
    color: #ff1493;
}
a {
    background-color: #ff1493;
}

Seletores de Classes¶

.rodape {
    color: #ff1943;
}

p.rodape {
    color: #ff1943;
}

.cabecalho {
    background-color: blue;
}

Seletores de Identificadores¶

#texto {
    color: #ff1943;
}

#imagem {
    color: #ff1943;
    background-color: blue;
}

p#texto {
    color: #ff1943;
    background-color: black;
}

Observação:¶

  • Para exemplificar, conheceremos duas propriedades de CSS para serem utilizadas em conjunto com os seletores supracitados.

2. Propriedade CSS: color¶

  • Sintaxe: color: valor;
  • As propriedades CSS são utilizadas para formatar os conteúdos conforme o tipo de seletor utilizado.
  • A formatação de cores dos textos é feita por meio da propriedade color. É aplicada sobre o texto, conteúdo.

2.1. Valores possíveis para a propriedades color¶

  • Para consultar as cores em diversos formatos, no google, digite: color picker.
  1. Utilizando as palavras-chave das cores diretamente.
seletor { 
    color: blue;  
}  

seletor { 
    color: white;  
}
  1. Utilizando a palavra transparent.
seletor { 
    color: transparent;  
}
  1. Utilizando a cor current.
seletor { 
    color: currentColor;  
}
  1. Utilizando #ffffff em hexadecimal.
seletor { 
    color: #fff;  
}
  1. Utilizando RGB (red, green, blue) em decimal.
seletor { 
    color: rgb(255, 104, 154);  
}
  1. Utilizando RGBA (red, green, blue, a) em decimal com definição de opacidade (varia de 0 a 1).
seletor { 
    color: rgba(255, 104, 154, 0.5);  
}
  1. Utilizando CMYK em percentagem.
seletor { 
    color: cmyk(0%, 26%, 99%, 1%);  
}
  1. Utilizando HSL (hue - matiz, saturation - saturação, lightness - brilho).
    • Hue é um grau na roda de cores; 0° (ou 360°) é vermelho, 120 é verde, 240 é azul. As variações entre estes valores refletem as diferentes tonalidades.
    • Saturation é um valor percentual; 100% é a cor completa.
    • Lightness é também uma porcentagem; 0% é escuro (preto), 100% é claro (branco) e 50% é a média.
seletor { 
    color: hsl(16°, 65%, 100%);  
}
  1. Utilizando HSLA (hue - matiz, saturation - saturação, lightness - brilho, a) com opacidade (varia de 0 a 1).
seletor { 
    color: hsla(16°, 65%, 100%, 0.37);  
}

3. Propriedade CSS: background¶

3.1. Valores possíveis para a propriedades background¶

  • Sintaxe: background: valores;
  • Para formatarmos o plano de fundo das imagens, itens, utilizamos a propriedade css de background.

  • Para maiores conhecimentos, consulte CSS-Tricks.

  • E para exemplos de padrões de background, consulte CSS3 Patterns Gallery.

  • A propriedade background permite controlar o plano de fundo de qualquer elemento. Também, é uma propriedade abreviada, em uma única linha configuramos todo o background. Exemplo:

body {
    background: 
        url(imagens/elefante.jpg) /* image */
        top center / 200px 200px  /* position  size */
        no-repeat                 /* repeat */
        fixed                     /* attachment */
        padding-box               /* origin */
        content-box               /* clip */
        red;                      /* color */
}
  1. background-image:
  • Define uma imagem de fundo.

    • URL: url(caminho/imagem.gif).
    • URL: url(’caminho/imagem.gif’).
    • URL: url("caminho/imagem.gif").
    • Gradiente linear: linear-gradient(45deg, blue, red).
    • Gradiente radial: radial-gradient(20px 50px, green, blue, red).
  1. background-position:
  • Define como e onde a imagem de fundo é posicionada.
  • O valor padrão é: 0 0.
  • Permitido pixels, percentuais ou posições (top, bottom, left, right).

    • Xpx Ypx
    • X% Y%
    • top left
    • top center
    • top right
    • center left
    • center center
    • center right
    • bottom left
    • bottom center
    • bottom right
    • top
    • right
    • bottom
    • left
  1. background-size:
  • Define as dimensões da imagem no box.

    • 150px 70px: a imagem terá as dimensões definidas por unidade de medida CSS.
    • auto: a imagem terá suas dimensões originais - este é o valor padrão.
    • contain: a imagem terá as dimensões de modo a que sua maior dimensão ocupe toda a extensão do box e a menor dimensão seja tal que o aspect ratio (relação entre largura e altura) seja preservado.
    • cover: a imagem terá as dimensões de modo a que sua menor dimensão ocupe toda a extensão do box e a maior dimensão seja tal que o aspect ratio (relação entre largura e altura) seja preservado.
  1. background-repeat:
  • Define a maneira como a imagem de fundo é posicionada.

    • imagem não repete: no-repeat.
    • imagem repete na vertical e horizontal: repeat.
    • imagem repete na vertical: repeat-y.
    • imagem repete na horizontal: repeat-x.
    • imagem toca as quatro bordas internas do box e são espaçadas de modo a se distribuirem igualmente: space.
    • imagem toca as quatro bordas internas do box e são redimensionadas de modo a preencherem o fundo tocando umas nas outras: round.
  1. background-attachment:
  • Define se a imagem de fundo "rola" ou não com a tela.
  • O valor padrão é scroll.

    • fixed: imagem permanece fixa em relação à viewport (janela do navegador) e não rola juntamente com o conteúdo.
    • scroll: imagem não permanece fixa em relação à viewport (janela do navegador) e rola juntamente com o conteúdo - este é o valor padrão.
    • local: imagem permanece fixa em relação à viewport (janela do navegador) mas quando aplicada ao box de um elemento rola juntamente com o conteúdo se o elemento tiver um mecanismo de rolagem definido por overflow: scroll.
  1. background-origin:
  • Define a posição de origem da imagem no box.

    • border-box: a a imagem tem por origem o canto superior esquerdo do box considerada das bordas do box, se houver uma - este é o comportamento padrão.
    • padding-box: a imagem tem por origem o canto superior esquerdo do box sem considerar as bordas do box, se houver uma.
    • ontent-box: a imagem tem por origem o canto superior esquerdo do box sem considerar o padding e as bordas do box, se houver.
  1. background-clip:
  • Define a área do box onde a imagem de fundo é aplicada.

    • border-box: a imagem ocupa até a área das bordas do box, inclusive, se houver uma - este é o comportamento padrão.
    • padding-box: a imagem ocupa até a área de padding do box, inclusive, se houver uma e não ocupa a área de bordas.
    • content-box: a imagem ocupa até a área de conteúdo do boxe não ocupa as áreas de padding e bordas se houver.
  1. background-color:
  • Define a cor do fundo.

    • código hexadecimal: #ffc6d9.
    • código rgb: rgb(255,235,0).
    • código rgba: rgb(255,235,0, 0.7).
    • código hsl: hsl(210,100%,40%).
    • código hsla: hsla(155,80%,35%,0.4).
    • palavra-chave: red, blue, green...etc.
    • transparente: transparent.

Observação:¶

  • O CSS3 adicionou suporte para vários fundos, que se sobrepõem.
  • Qualquer propriedade relacionada a planos de fundo pode ter uma lista separada por vírgula, assim:
body {
    background: url(elefante.jpg), url(casa.jpg) black;
    background-repeat: repeat-x, no-repeat;
}
  • Cada valor na lista separada por vírgula corresponde a uma camada: o primeiro valor é a camada superior, o segundo valor é a segunda camada e a cor do plano de fundo é sempre a última camada.

4. Propriedade CSS customizada¶

  • De acordo com Maujor, "A finalidade da especificação é a de criar uma funcionalidade que consiste em um novo valor CSS primitivo denominado variável CSS para ser usado como parâmetro em uma função que retorne um valor a ser atribuído a qualquer uma das propriedades CSS, possibilitando assim o uso de variáveis nas CSS.".
  • O valor CSS é uma grandeza que define as quantidades e características de uma propriedade.
  • Variáveis CSS permitem que se criem um valor CSS customizado e alterável em diferentes lugares em uma folha de estilos. Logo, define-se o valor uma única vez. E reutiliza-se em diversos lugares.
  • Para aprofundamento sobre as propriedades personalizadas CSS para módulo de variáveis em cascata - nível 1, consulte W3C.org.
  • Sintaxe para criar uma variável CSS tem um formato geral:
    • 2 hífens seguidos pelo nome da variável, dois pontos e os valores segundo padrão daquela propriedade que está sendo customizada, e ponto é vírgula no final.

Parte 1: Exemplo de parte de um arquivo.css.¶

--cor-perigo: red;
--bordacolorida: 2px solid blue;
--margem-definida: 2.5em;
--maiusculo: uppercase;
  • Para utilizar essas variáveis em outra parte da folha de estilos (arquivo.css), é necessário utilizar a palavra var seguida de parênteses. E dentro destes, o nome da variável criada.
div {
  border: var( bordacolorida );
  margin: var( --margem-definida );
  text-transform: var( --maiusculo );
}

Parte 2: Escopo de variáveis CSS¶

  • Outro ponto importante é a definição de um escopo de variáveis CSS.

  • Seletor CSS:

    • :root: neste caso o escopo das variáveis é o seletor :root que é a raiz do documento, ou seja a página.
    • Logo, o contexto das variáveis é representado por toda a página, ou seja, as variáveis são reconhecidas e surtem efeito em regras CSS definidas para qualquer elemento da página.
    • Pode ser definido um contexto que considere somente uma determinada parte da página.
  • Contexto para a página toda.

:root {
    --cor-perigo: red;
    --bordacolorida: 2px solid blue;
    --margem-definida: 2.5em;
    --maiusculo: uppercase;
}
  • Contexto em uma determinada parte.
footer {    
    --minha-cor-fundo: black;
    --minha-cor: red;
    --minha-largura: 40%;
}

Parte 3: Valor default de uma variável CSS¶

  • Ainda de acordo com Maujor, "a especificação prevê a possibilidade de se declarar um valor default, opcional, para a variável, que deve ser passado como parâmetro para a função var( ) conforme mostrado no exemplo a seguir no qual a cor de fundo foi definida com uso de uma variável denominada --cor cujo valor default é a cor preta (black), separados por vírgula".
seletor {   
    background-color: var( --cor, black );
}
  • Declaração da variável no escopo do componente.
.component {
  --cor-texto: green;                        /* Notar que --cor-header não foi declarada */
}


/* Regras de estilo */

.component .header {
  color: var(--cor-header, blue);            /* estiliza na cor blue, pois --cor-header não foi declarada */
}

.component .text {
  color: var(--cor-texto, black);            /* estiliza na cor green, pois --cor-texto foi declarada */
}

Observação¶

  • Existe uma diretiva !important que ao ser usada em um valor de variável não a invalida, contudo não altera o efeito cascata e nem a especificidade da regra CSS, ou seja, não cumpre sua finalidade, portanto não use essa diretiva ao declarar as variáveis.
p { color: red !important; }

4.1. Pseudo-classes¶

  • Sintaxe:
    • seletor: de HTML, Classes e Identificadores.
    • pseudo-classe: Índice de Pseudo-classes padrão.
    • propriedade: é a propriedade css com seu respectivo valor.
/* Exemplo arquivo .css */

seletor:pseudo-classe {
  propriedade: valor;
}


/* Seleciona qualquer <input> requerido */
input:required {
  border: 1px dashed red;
}
  • Exemplo:
<!-- Parte de um código de arquivo .html -->

<head>

<style>

/* Seleciona a última tag <p> com tag <em> como filho */    
p em:last-of-type {
  color: red;
}

</style>
</head>

<body>
<p>
  <em>Eu não sou vermelho :(</em>
  <strong>Eu não sou vermelho :(</strong>
  <em>Eu sou vermelho. Sou o último do tipo neste parágrafo :D</em>
  <strong>Eu quase sou vermelho :(</strong>
</p>

</body>

Figura 1: Exemplos de uso de pseudo-classes

Fonte: Autoria própria

Referências¶

  • Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.


ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.

</div> </div>